<template>
  <div class="analytics-page">
    <div class="page-header">
      <h2>数据分析</h2>
      <div class="time-range">
        <select v-model="timeRange" class="time-select">
          <option value="7">最近7天</option>
          <option value="30">最近30天</option>
          <option value="90">最近90天</option>
          <option value="365">最近一年</option>
        </select>
      </div>
    </div>

    <div class="analytics-grid">
      <!-- 关键指标 -->
      <div class="metrics-section">
        <h3>关键指标</h3>
        <div class="metrics-grid">
          <div class="metric-card">
            <div class="metric-icon">📊</div>
            <div class="metric-info">
              <h4>总收入</h4>
              <p class="metric-value">¥{{ totalRevenue }}</p>
              <span class="metric-change positive">+15.2%</span>
            </div>
          </div>
          <div class="metric-card">
            <div class="metric-icon">👥</div>
            <div class="metric-info">
              <h4>新增用户</h4>
              <p class="metric-value">{{ newUsers }}</p>
              <span class="metric-change positive">+8.3%</span>
            </div>
          </div>
          <div class="metric-card">
            <div class="metric-icon">🛒</div>
            <div class="metric-info">
              <h4>订单数量</h4>
              <p class="metric-value">{{ totalOrders }}</p>
              <span class="metric-change negative">-2.1%</span>
            </div>
          </div>
          <div class="metric-card">
            <div class="metric-icon">💰</div>
            <div class="metric-info">
              <h4>转化率</h4>
              <p class="metric-value">{{ conversionRate }}%</p>
              <span class="metric-change positive">+3.7%</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 销售趋势 -->
      <div class="chart-section">
        <h3>销售趋势</h3>
        <div class="chart-container">
          <div class="chart-placeholder">
            <div class="chart-bars">
              <div class="chart-bar" v-for="(value, index) in salesData" :key="index" :style="{ height: value + '%' }"></div>
            </div>
            <div class="chart-labels">
              <span v-for="(label, index) in chartLabels" :key="index">{{ label }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户分析 -->
      <div class="user-analysis">
        <h3>用户分析</h3>
        <div class="analysis-content">
          <div class="pie-chart">
            <div class="pie-center">
              <span class="pie-label">用户类型</span>
            </div>
            <div class="pie-legend">
              <div class="legend-item">
                <div class="legend-color" style="background: #3498db;"></div>
                <span>新用户 (45%)</span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background: #e74c3c;"></div>
                <span>老用户 (35%)</span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background: #f39c12;"></div>
                <span>VIP用户 (20%)</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门产品 -->
      <div class="top-products">
        <h3>热门产品</h3>
        <div class="product-list">
          <div class="product-item" v-for="product in topProducts" :key="product.id">
            <div class="product-rank">{{ product.rank }}</div>
            <div class="product-info">
              <h4>{{ product.name }}</h4>
              <p>销量: {{ product.sales }}</p>
            </div>
            <div class="product-revenue">¥{{ product.revenue }}</div>
          </div>
        </div>
      </div>

      <!-- 地区分析 -->
      <div class="region-analysis">
        <h3>地区分析</h3>
        <div class="region-list">
          <div class="region-item" v-for="region in topRegions" :key="region.name">
            <div class="region-name">{{ region.name }}</div>
            <div class="region-bar">
              <div class="region-progress" :style="{ width: region.percentage + '%' }"></div>
            </div>
            <div class="region-value">{{ region.value }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const timeRange = ref('30')

const totalRevenue = computed(() => '45,678')
const newUsers = computed(() => '1,234')
const totalOrders = computed(() => '892')
const conversionRate = computed(() => '12.5')

const salesData = ref([60, 80, 45, 90, 75, 100, 85])
const chartLabels = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])

const topProducts = ref([
  { id: 1, rank: 1, name: '无线蓝牙耳机', sales: 234, revenue: 46800 },
  { id: 2, rank: 2, name: '智能手表', sales: 189, revenue: 169911 },
  { id: 3, rank: 3, name: '蓝牙音响', sales: 156, revenue: 46644 },
  { id: 4, rank: 4, name: '智能手环', sales: 134, revenue: 21306 },
  { id: 5, rank: 5, name: '无线充电器', sales: 89, revenue: 13261 },
])

const topRegions = ref([
  { name: '北京', value: '¥12,345', percentage: 100 },
  { name: '上海', value: '¥10,892', percentage: 88 },
  { name: '广州', value: '¥8,756', percentage: 71 },
  { name: '深圳', value: '¥7,234', percentage: 59 },
  { name: '杭州', value: '¥5,678', percentage: 46 },
])
</script>

<style scoped>
.analytics-page {
  animation: fadeIn 0.3s ease-in-out;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h2 {
  color: #2c3e50;
  margin: 0;
  font-size: 28px;
}

.time-select {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.metrics-section {
  grid-column: 1 / -1;
}

.metrics-section h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 20px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.metric-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.metric-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  background: #f8f9fa;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-info h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

.metric-value {
  margin: 0 0 4px 0;
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
}

.metric-change {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
}

.metric-change.positive {
  color: #27ae60;
  background: #d5f5e3;
}

.metric-change.negative {
  color: #e74c3c;
  background: #fadbd8;
}

.chart-section,
.user-analysis,
.top-products,
.region-analysis {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-section h3,
.user-analysis h3,
.top-products h3,
.region-analysis h3 {
  color: #2c3e50;
  margin: 0 0 20px 0;
  font-size: 18px;
}

.chart-container {
  height: 300px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-bars {
  display: flex;
  align-items: end;
  gap: 8px;
  flex: 1;
  padding: 20px 0;
}

.chart-bar {
  background: linear-gradient(180deg, #3498db 0%, #2980b9 100%);
  border-radius: 4px 4px 0 0;
  flex: 1;
  min-height: 20px;
}

.chart-labels {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  font-size: 12px;
  color: #7f8c8d;
}

.pie-chart {
  display: flex;
  align-items: center;
  gap: 40px;
}

.pie-center {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#3498db 0deg 162deg, #e74c3c 162deg 288deg, #f39c12 288deg 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pie-center::before {
  content: '';
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 50%;
  position: absolute;
}

.pie-label {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 600;
  color: #2c3e50;
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.product-rank {
  width: 24px;
  height: 24px;
  background: #3498db;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 12px;
}

.product-info {
  flex: 1;
}

.product-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #2c3e50;
}

.product-info p {
  margin: 0;
  font-size: 12px;
  color: #7f8c8d;
}

.product-revenue {
  font-weight: 600;
  color: #e74c3c;
}

.region-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.region-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.region-name {
  width: 60px;
  font-size: 14px;
  color: #2c3e50;
}

.region-bar {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.region-progress {
  height: 100%;
  background: linear-gradient(90deg, #3498db 0%, #2980b9 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.region-value {
  width: 80px;
  text-align: right;
  font-size: 14px;
  color: #2c3e50;
  font-weight: 600;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .pie-chart {
    flex-direction: column;
    gap: 20px;
  }
}
</style> 